<template>
  <div class="sidebar_content boxSize">
    <el-header><span v-if="!collapse" class="logo"></span>银企直连</el-header>
    <el-aside :width="collapse ? '60px' : '180px'">
      <el-menu
        router
        default-active="2"
        background-color="#001529"
        text-color="#efefef"
        active-text-color="#FFF"
        :collapse="collapse">
        <el-submenu v-for="(val, idx) in list" :key="idx" :index="`${idx}`">
          <template slot="title">
            <i class="icon iconfont" :class="val.class"></i>
            <span>{{val.text}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="(value, index) in val['children']"
                          :key="idx + '_' + index"
                          :index="value.url" :route="value.url">
              {{value.text}}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    background-color="#001529"
  </div>
</template>

<script>
export default {
  props: {
    collapse: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      list: [
        {
          url: '/home',
          text: '浦发硅谷',
          class: 'icon-zhuanzhang',
          children: [
            {
              url: '/innerTransfer',
              text: '行内转账',
              class: 'icon-zhuanzhang'
            },
            {
              url: '/interTransfer',
              text: '跨行转账',
              class: 'icon-kuahangzhanghudanbizhuanzhang'
            },
            {
              url: '/balanceInquiry',
              text: '余额查询',
              class: 'icon-yuechaxun'
            },
            {
              url: '/transactionFlow',
              text: '交易明细',
              class: 'icon-daohangshouqi-'
            }
          ]
        }
      ]
    }
  },
  methods: {
    Jump (params) {
      this.$router.replace({path: params})
    }
  }
}
</script>

<style scoped lang = 'less'>
.sidebar_content {
  display: flex;
  flex-direction: column;
  align-items: center;

  color: #fff;

  .el-header {
    padding: 0 4px;
    background: #002140;
    width: 100%;
    display: flex;
    font-size: 13px;
    align-items: center;
    justify-content: center;
    .logo{
      width: 25px;
      height: 25px;
      background-size: 25px 25px;
      background-image: url('../assets/logo.svg');
      margin-right: 5px;
    }
  }
  .el-aside {
    /* height: 100vh; */
    background: #001529;
    flex: 1;
    .icon {
      padding-right: 10px;
    }
    .el-menu {
      border: none;
      background: #001529;
    }
  }
}
</style>
